import { useRef } from 'react';
import { ProTable, ProColumns } from '@ant-design/pro-components';
import { zuoBiaos } from '@/utils';
import useRoute from '@/hooks/useRoute';
import dingWei from '@/assets/imgs/dingWei.png';

export default function DemoTable() {
  const { goto } = useRoute();
  const tableRef: any = useRef('');

  // 请求
  const request = async () => {
    return { data: zuoBiaos, total: zuoBiaos.length, success: true };
  };

  const columns: ProColumns[] = [
    {
      title: 'Analysis assigned',
      dataIndex: 'analysis',
      render: (_, record) => (
        <div className="center-v" style={{ paddingLeft: '30%' }}>
          <div className="dingWeiwrap img-cover">
            <img src={dingWei} alt="" />
          </div>
        </div>
      ),
    },
    {
      title: 'Created',
      dataIndex: 'created',
    },
    {
      title: 'Renews',
      dataIndex: 'renews',
    },
    {
      title: 'Inspection',
      dataIndex: 'inspection',
    },
    {
      title: 'Company',
      dataIndex: 'company',
    },
    {
      title: 'Type',
      dataIndex: 'type',
    },
    {
      title: 'Images',
      dataIndex: 'images',
    },
    {
      title: 'Assets',
      dataIndex: 'assets',
    },
  ];

  return (
    <>
      <ProTable
        rowKey="id"
        columns={columns}
        request={request}
        actionRef={tableRef}
        search={false}
        options={false}
        onRow={(record) => ({
          onClick: () =>
            goto(`/demo/detail?longitude=${record?.longitude}&latitude=${record?.latitude}`),
        })}
      />
    </>
  );
}
